<template>
  <div style="width: 100%; min-width: 312px; height: 100%" class="org">
    <div class="listContant">
      <fks-query-page
        v-loading="loading"
        row-key="content.id"
        :data="treeData"
        :page="false"
        highlight-current-row
        :expand-row-keys="defaltExpand"
        :table-name="LANG.ORG_DEPARTMENT"
      >
        <template slot="singleSearch">
          <div class="single-searchBox">
            <fks-button
              v-permission="['dept:add']"
              type="primary"
              icon="fks-icon-plus"
              @click="addHandler"
            >
              <span>{{ LANG.ADD }}</span>
            </fks-button>
          </div>
        </template>
        <template>
          <fks-table-column type="index" align="center" width="50" label="#" />
          <fks-table-column
            prop="name"
            :label="LANG.DEPTNAME"
            header-align="center"
            is-link
            min-width="250px"
            align="left"
            @link="viewHandler"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.content.name }}</span>
            </template>
          </fks-table-column>
          <fks-table-column prop="entName" :label="LANG.ENTNAME" align="center">
            <template slot-scope="scope">
              {{ scope.row.content.entName }}
            </template>
          </fks-table-column>
          <fks-table-column :label="LANG.OPERATION" align="left" width="200">
            <span slot-scope="scope">
              <fks-button
                v-permission="['dept:addChild']"
                type="text"
                @click="addSubChildHandler(scope.row.content)"
                >{{ LANG.ADD_SUBDEPT }}</fks-button
              >
              <fks-button
                v-permission="['dept:edit']"
                type="text"
                @click="editHandler(scope.row.content)"
                >{{ LANG.EDIT }}</fks-button
              >
              <fks-button
                v-permission="['dept:delete']"
                danger-text
                @click="delHandler(scope.row)"
                >{{ LANG.DELETE }}</fks-button
              >
            </span>
          </fks-table-column>
        </template>
      </fks-query-page>
    </div>
    <org-info
      :visible.sync="dialogVisible"
      :title="title"
      :data="orgData"
      :tree-data="copyTreeData"
      @refresh="getData()"
    />
  </div>
</template>
<script>
import * as orgApi from './api'
import Mix from '@/mixins/module'
import orgInfo from './DeptInfo/index'
export default {
  name: 'Department',
  components: {
    orgInfo
  },
  mixins: [Mix],
  data() {
    return {
      loading: false,
      orgData: {},
      title: '',
      deleteConfirm: '',
      dialogVisible: false,
      defaltExpand: [],
      treeData: [],
      copyTreeData: []
    }
  },
  computed: {
    portalId() {
      return this.$store.state.portal.id
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //获取组织机构数据
    @permission('dept:query')
    getData() {
      this.loading = true
      orgApi
        .getOrgs(this.portalId)
        .then((res) => {
          this.loading = false
          if (res.status) {
            if (res.data[0]) {
              this.defaltExpand.push(res.data[0].content.id)
            }
            this.treeData = res.data
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    //打开编辑组织机构弹窗
    editHandler(data) {
      this.orgData = JSON.parse(JSON.stringify(data))
      this.dialogVisible = true
      this.title = this.LANG.EDIT
    },
    //打开查看组织机构弹窗
    viewHandler({ row }) {
      this.orgData = JSON.parse(JSON.stringify(row.content))
      this.dialogVisible = true
      this.title = this.LANG.VIEW
    },
    // 打开新增组织机构弹窗
    addHandler() {
      this.dialogVisible = true
      this.title = this.LANG.ADD
      this.orgData = {}
      this.copyTreeData = this.treeData
    },
    //打开新增子部门弹窗
    addSubChildHandler(data) {
      this.title = this.LANG.ADD_SUBDEPT
      this.orgData = JSON.parse(JSON.stringify(data))
      this.dialogVisible = true
    },
    //打开删除组织机构二次确认弹窗
    delHandler(data) {
      orgApi
        .getUser({ orgNo: data.content.orgNo })
        .then((res) => {
          if (res.status && res.data.length > 0) {
            this.deleteConfirm = this.LANG.DELETE_DEPARTMENT_CONFIRM
            this.deleteOrg(data)
          } else {
            this.deleteConfirm = this.LANG.DELETE_CONFIRM
            this.deleteOrg(data)
          }
        })
        .catch(() => {})
    },
    // 删除组织机构
    @monitor('click', '删除组织机构')
    deleteOrg(data) {
      this.$confirm(this.deleteConfirm, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      })
        .then(() => {
          orgApi
            .deleteOrg(data.content.id)
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.DELETE_SUCCESS)
                //删除后刷新
                this.getData(true)
              }
            })
            .catch(() => {})
        })
        .catch(() => {})
      return { id: data.content.id }
    }
  }
}
</script>
<style lang="scss" scoped>
.listContant {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.org {
  background-color: #f7f8f8;
}
</style>